import { DemoBlock } from '@/library/widgets/DemoBlock'
import { DotLoading } from '@/library/gallery/components/DotLoading'
import { Space } from '@/library/gallery/components/Space'
// import { reduceMotion, restoreMotion } from '@/components/common/tools/reduce-and-restore-motion'

// React.useEffect(() => {
//   reduceMotion()
// }, [])

export default (): React.ReactElement => (
  <>
    <DemoBlock title="默认">
      <DotLoading />
    </DemoBlock>

    <DemoBlock title="主题色">
      <DotLoading color="primary" />
    </DemoBlock>

    <DemoBlock title="白色" background="#a5a5a5">
      <DotLoading color="white" />
    </DemoBlock>

    <DemoBlock title="自动适配字号">
      <span style={{ fontSize: 14 }}>
        <DotLoading />
      </span>
      <span style={{ fontSize: 18 }}>
        <DotLoading />
      </span>
      <span style={{ fontSize: 24 }}>
        <DotLoading />
      </span>
    </DemoBlock>

    <DemoBlock title="自动适配文本颜色">
      <Space direction="vertical">
        <div style={{ color: '#00b578' }}>
          <DotLoading color="currentColor" />
          <span>绿色文字</span>
        </div>
        <div style={{ color: '#ff3141' }}>
          <DotLoading color="currentColor" />
          <span>红色文字</span>
        </div>
      </Space>
    </DemoBlock>
  </>
)
